<!-- components/ChatPanel.vue -->
<template>
    <div ref="messagesContainer" class="h-full overflow-y-auto p-6 bg-gradient-to-b from-white to-blue-50/30">
      <!-- 空状态 -->
      <div v-if="messages.length === 0 && !loading" class="h-full flex flex-col items-center justify-center text-center">
        <div class="relative mb-6">
          <div class="w-24 h-24 bg-gradient-to-br from-blue-400 to-purple-500 rounded-3xl flex items-center justify-center text-white text-4xl shadow-lg transform rotate-12 animate-float">
            🤖
          </div>
          <div class="absolute -top-2 -right-2 w-8 h-8 bg-yellow-400 rounded-full flex items-center justify-center text-white text-sm font-bold shadow-md">
            AI
          </div>
        </div>
        <h3 class="text-xl font-bold text-blue-800 mb-2">开始与AI对话</h3>
        <p class="text-blue-600/70 max-w-md">探索智能交互的乐趣，获取专业解答和创意灵感</p>
      </div>
      
      <!-- 消息列表 -->
      <div v-else class="space-y-6">
        <div
          v-for="message in messages"
          :key="message.id"
          class="flex gap-4 transition-all duration-500 transform hover:scale-[1.01]"
          :class="message.role === 'user' ? 'flex-row-reverse' : 'flex-row'"
        >
          <!-- 头像 -->
          <div class="flex-shrink-0 relative">
            <div 
              class="w-12 h-12 rounded-2xl flex items-center justify-center text-white text-lg font-bold shadow-lg transition-all duration-300 hover:scale-110"
              :class="message.role === 'user' 
                ? 'bg-gradient-to-br from-blue-500 to-blue-600' 
                : 'bg-gradient-to-br from-purple-500 to-pink-500'"
            >
              {{ message.role === 'user' ? '你' : 'AI' }}
            </div>
            <div 
              v-if="message.role === 'assistant' && message.model"
              class="absolute -top-1 -right-1 bg-yellow-400 text-yellow-900 text-xs px-2 py-1 rounded-full font-bold"
            >
              {{ getModelBadge(message.model) }}
            </div>
          </div>
          
          <!-- 消息内容 -->
          <div 
            class="max-w-[75%] rounded-3xl px-6 py-4 shadow-lg transition-all duration-300 hover:shadow-xl"
            :class="message.role === 'user' 
              ? 'bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-br-md' 
              : 'bg-white border-2 border-purple-100 text-gray-800 rounded-bl-md'"
          >
            <div class="whitespace-pre-wrap leading-relaxed">{{ message.content }}</div>
            <div 
              class="flex items-center justify-between mt-3 text-xs"
              :class="message.role === 'user' ? 'text-blue-100' : 'text-gray-500'"
            >
              <span>{{ formatTime(message.timestamp) }}</span>
              <span v-if="message.model" class="flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
                </svg>
                {{ getModelName(message.model) }}
              </span>
            </div>
          </div>
        </div>
        
        <!-- 加载状态 -->
        <div v-if="loading" class="flex gap-4 animate-pulse">
          <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white text-lg font-bold shadow-lg">
            AI
          </div>
          <div class="bg-white border-2 border-purple-100 rounded-3xl rounded-bl-md px-6 py-4 shadow-lg max-w-[75%]">
            <div class="flex space-x-2 items-center">
              <div class="flex space-x-1">
                <div class="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style="animation-delay: -0.32s"></div>
                <div class="w-2 h-2 bg-purple-400 rounded-full animate-bounce" style="animation-delay: -0.16s"></div>
                <div class="w-2 h-2 bg-purple-400 rounded-full animate-bounce"></div>
              </div>
              <span class="text-purple-600 text-sm font-medium ml-2">AI正在思考中...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  interface Message {
    id: string
    role: 'user' | 'assistant'
    content: string
    timestamp: Date
    model?: string
  }
  
  interface Props {
    messages: Message[]
    loading?: boolean
  }
  
  const props = defineProps<Props>()
  const messagesContainer = ref<HTMLDivElement>()
  
  // 自动滚动到底部
  watch(() => [...props.messages], () => {
    nextTick(() => {
      if (messagesContainer.value) {
        messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
      }
    })
  }, { deep: true, immediate: true })
  
  // 格式化时间
  const formatTime = (date: Date) => {
    return new Date(date).toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  
  // 获取模型显示名称
  const getModelName = (model: string) => {
    const modelMap: Record<string, string> = {
      'qwen-plus': '千问Plus',
      'qwen-max': '千问Max',
      'deepseek-coder': 'DeepSeek',
      'llama-3-8b-instruct': 'LLaMA',
      'hunyuan': '腾讯混元',
      'glm': '智谱清言'
    }
    return modelMap[model] || model
  }
  
  // 获取模型徽章
  const getModelBadge = (model: string) => {
    const badgeMap: Record<string, string> = {
      'qwen-plus': 'Q+',
      'qwen-max': 'QMax',
      'deepseek-coder': 'DS',
      'llama-3-8b-instruct': 'LLaMA',
      'hunyuan': '混元',
      'glm': 'GLM'
    }
    return badgeMap[model] || 'AI'
  }
  </script>
  
  <style scoped>
  /* 浮动动画 */
  @keyframes float {
    0%, 100% {
      transform: translateY(0) rotate(12deg);
    }
    50% {
      transform: translateY(-10px) rotate(12deg);
    }
  }
  
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }
  
  /* 消息进入动画 */
  .message-enter-active {
    transition: all 0.5s ease;
  }
  
  .message-enter-from {
    opacity: 0;
    transform: translateY(20px);
  }
  </style>